<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id="app">
		<h2>绑定监听</h2>
	<button @click="test1">111</button>
	<button @click="test2('hahha')">222</button>
	<button @click="test3">333</button>
	<button @click="test4(123,$event)">444</button>

		<h2>事件修饰符</h2>
		<div style="width: 200px;height: 200px;background-color: red" @click="test5">
			<div style="width: 50px;height: 50px;background-color: blue" @click.stop="test6"></div>
		</div>

		<a href="https://baidu.com" @click.prevent="test7">去百度</a>


		<h2>按键修饰符</h2>
		<input type="text" @keyup.enter="test8" />
	</div>
	<script src="../vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:'#app',
			data:{
				test1() {
					alert('test')
				},
				test2(msg) {
					alert(msg)
				},
				test3(event) {
					alert(event.target.innerHTML)
				},
				test4(number,event) {
					alert(number+'---'+event.target.innerHTML)
				},
				test5() {
					alert('out')
				},
				test6() {
					alert('in')
				},
				test7() {
					// event.preventDefault()
					alert('点击了')
				},
				test8(event) {
					// 原始写法，按下enter
					// if (event.keyCode===13) {}
					alert(event.target.value)
					
				}
			}
		});
	</script>
</body>
</html>